<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一号店</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./JQurey.js"></script>
    <style>
    </style>
</head>
<body>
    <div class="head">
        <div class="box1">
            <img src="./images/big.jpg">
        </div>
        <div class="box2">
            <img src="./images/big1.png" class="img1">
            <img src="./images/big2.png" class="img2">
        </div>
        <div class="text">原1号店于2020年7月22日正式升级为1号会员店，通过全场自营、精选商品模式，
            致力于为用户提供品质升级、超值天天低价、便捷省心的会员制购物体验。
            <div class="textBox">
                <img src="./images/iPhone.png" class="img4">
                <span>下载APP</span> 
                <img src="./images/erweima.png" class="img3">
            </div>
           
        </div>
        <div class="inform">
            <span>“礼品卡”“账户余额”业务调整公告</span> 
        </div>
        </div>

        <div class="main">
            <div class="main-1">
                <img src="./images/jingxuan.png" class="img5">
                <p>自营全站商品 以严格选品标准 精挑细选3000+最优好货</p>
            </div>
            <ul class="ul1">
                <li><img src="./images/6-1.png" img1-src="./images/6-11.png" img2-src="./images/6-111.png" class="img"><p class="p">肉蛋果蔬</p></li>
                <li><img src="./images/6-2.png" img1-src="./images/6-22.png" img2-src="./images/6-222.png" class="img"><p class="p">食品饮料</p></li>
                <li><img src="./images/6-3.png" img1-src="./images/6-33.png" img2-src="./images/6-333.png" class="img"><p class="p">服饰鞋包</p></li>
                <li><img src="./images/6-4.png" img1-src="./images/6-44.png" img2-src="./images/6-444.png" class="img"><p class="p">餐厨日用</p></li>
                <li><img src="./images/6-5.png" img1-src="./images/6-55.png" img2-src="./images/6-555.png" class="img"><p class="p">粮油速食</p></li>
                <li><img src="./images/6-6.png" img1-src="./images/6-66.png" img2-src="./images/6-666.png" class="img"><p class="p">精致小电</p></li>
            </ul>
            <div class="main-2">
                <div class="box6-1">
                <img src="./images/6-11.png" class="img6-11">
                <img src="./images/6-111.png" class="img6-111">
                </div>
                <!-- 左右箭头 -->
                <img src="./images/left.png" width="30px" class="left">
                <img src="./images/right.png" width="30px" class="right">
                <!-- <div class="box6-2">
                    <img src="./images/6-22.png" class="img6-11">
                    <img src="./images/6-222.png" class="img6-111">
                    </div>
                    <div class="box6-2">
                        <img src="./images/6-33.png" class="img6-11">
                        <img src="./images/6-333.png" class="img6-111">
                        </div>
                        <div class="box6-2">
                            <img src="./images/6-44.png" class="img6-11">
                            <img src="./images/6-444.png" class="img6-111">
                            </div>
                            <div class="box6-2">
                                <img src="./images/6-55.png" class="img6-11">
                                <img src="./images/6-555.png" class="img6-111">
                                </div>
                                <div class="box6-2">
                                    <img src="./images/6-66.png" class="img6-11">
                                    <img src="./images/6-666.png" class="img6-111">
                                    </div> -->
            </div>
            <div class="main-1">
                <img src="./images/wusuo.png" class="img5">
                <p>入会专享超值特权，天天低价</p>
            </div>
            <ul class="ul2">
                <li><img class="img_3" src="./images/3-1.png"><br><img class="img_33" src="./images/3-11.png"><div class="box3"><p>超值低价</p><p>入会即享</p></div></li>
                <li><img class="img_3" src="./images/3-2.png"><br><img class="img_33" src="./images/3-22.png"><div class="box3"><p>比价京东自营</p><p>全场会员价</p></div></li>
                <li><img class="img_3" src="./images/3-3.png"><br><img class="img_33" src="./images/3-33.png"><div class="box3"><p>到期没省出会费</p><p>全额赔付</p></div></li>
            </ul>
            <div class="main-3">
                <img src="./images/fangxin.png" class="img5">
                <p>售后无忧 客服物流时刻保障</p>
            </div>
            <div class="main-4">
                <img src="./images/mainbig.png">
            </div>

            <div class="main-5">
                <img src="./images/erweima.png">
                <div class="box4"><p>扫码下载APP</p>
                    <p>开启品质生活</p></div>
                <span>一期仅开放部分城市，敬请期待。</span>
            </div>
            <hr>
        </div>
        <div class="foot"> 
            <ul class="ul3">
                <li><img src="./images/4-1.png">精选好货</li>
                <li><img src="./images/4-2.png">精选好货</li>
                <li><img src="./images/4-3.png">精选好货</li>
                <li><img src="./images/4-4.png">精选好货</li>
            </ul>
            <div class="clear"></div>
            <div class="boxFoot">
            <p>沪ICP备16050468号-2 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：4006063968 | 沪B2-20170039 | 沪公网安备 31011302006998号 | 增值电信业务经营许可证</p>
            <p>Copyright© 1号会员店 2007-2021， All Rights Reserved</p>
            <div class="footer">
                <img src="./images/bottom1.png">
                <img src="./images/bottom2.png">
                <img src="./images/bottom3.png">
                <img src="./images/bottom4.png">
                <img id="small" src="./images/small.png">
                <img src="./images/bottom5.png">
                <img src="./images/bottom6.jpg">
                
            </div>
            </div>
       </div>
        
       <div class="fixed">
            <div class="ho1"><img class="imgF1" src="./images/kefu.png">联系客服</div>
            <div class="hover1">
                <p>客服联系电话</p>
                <span>400-185-6618</span>
            </div>
            <hr>
            <div>下载APP</div>
            <img class="imgF2" src="./images/erweima.png">
            <img class="imgF3" src="./images/text.png">
            <a href="#top">
            <div class="top">TOP<img class="imgF4" src="./images/fanhui.png"></div>
            </a>
       </div>
    
</body>
</html>
    <script>
        $(function(){
            var mask = $('<div class="mask"></div>');
            $('body').append(mask);
            var maskDiv = $('<div class="maskDiv"></div>')
            $('body').append(maskDiv);
            var str = '';
            str  = `<div class="maskDiv">
            <p class="p1">尊敬的1号店用户</p>
            <p class="p2">1号店现已全面升级成1号会员店，PC页面和H5页面部分功能现已调整，您可通过应用市场下载安
            装1号会员店APP，并登录您的1号店账号进行相关操作，如有疑问可联系客服。</p>
            <p class="p3">感谢您对1号店的支持与理解。</p>
            <button class="maskBtn">知道了</button>
            </div>`
            $('.maskDiv').html(str);

            //inform 点击事件出现蒙版
            $('.inform').click(function(){
                $('.mask').css('display','block');
                $('.maskDiv').css('display','block');
            })

            // maskDiv 点击事件 隐藏蒙版和maskDiv
            $('.maskBtn').click(function(){
                $('.mask').css('display','none');
                $('.maskDiv').css('display','none');
            })

            // 鼠标移入6个小照片 分别替换对应的大图片
            $('.img').mouseenter(function(){
                var img1 = $(this).attr('img1-src');
                $('.img6-11').attr('src',img1);
                var img2 = $(this).attr('img2-src');
                $('.img6-111').attr('src',img2);
                // 海报上移效果
                // $('.img6-111').css('transition','all .5s ease-out');
                // $('.img6-111').css('top','120px');

                // 照片过度放大 
                $(this).css('transform','scale(1.3)');
                $(this).css('transition','all .5s');
                $(this).siblings('img').css('transform','scale(1)');
                $(this).parent().siblings('li').children('p').css('display','block');
                $(this).parent().siblings('li').children('img').css('transform','scale(1)');
                // 文字隐藏
                var p = $(this).siblings('p');
                p.css('display','none');

            })
            
            // 鼠标移出时 照片恢复并且文字显示
            $('.img').mouseleave(function(){
                $(this).css('transform','scale(1)');
                // $(this).css('transition','all .0s');
                var p = $(this).siblings('p');
                p.css('display','block');
                console.log(p);
            })
            var i = 0;
            var arr = $('.img');
            var img1 = $('.img6-11');
            var img2 = $('.img6-111');
            // 点击右侧按钮事件
            $('.right').click(function(){
                i++;
                if(i >= arr.length){
                    i = 0;
                }
                var src_ = arr[i].getAttribute('img1-src');
                var src2_ = arr[i].getAttribute('img2-src');
                img1.attr('src',src_);
                img2.attr('src',src2_);
                for(var j = 0 ; j < arr.length ; j++ ){
                arr[j].setAttribute('style','transform:scale(1) ; transition:all .5s');
                $('.p')[j].setAttribute('style','display:block');
                }
                arr[i].setAttribute('style','transform:scale(1.3) ; transition:all .5s');
                $('.p')[i].setAttribute('style','display:none');

            })
            // 点击左侧按钮事件
            $('.left').click(function(){
                i--;
                if(i < 0){
                    i = arr.length - 1 ;
                }
                var src_ = arr[i].getAttribute('img1-src');
                var src2_ = arr[i].getAttribute('img2-src');
                img1.attr('src',src_);
                img2.attr('src',src2_);

                for(var j = 0 ; j < arr.length ; j++ ){
                arr[j].setAttribute('style','transform:scale(1) ; transition:all .5s');
                $('.p')[j].setAttribute('style','display:block');
                }
                arr[i].setAttribute('style','transform:scale(1.3) ; transition:all .5s');
                $('.p')[i].setAttribute('style','display:none');
            })





        })
        
        


    </script>